<template>
	<a-layout-header>
		<a-row justify="space-between" align="center">
			<a-space :size="25" style="padding-left: 11%;padding-top: 1%;">
				<div id="content">
					<div id="title">
						<i class="web-font" style="font-size: 25px;">
							<slot name="title"></slot>
						</i>
						<i class="web-font detail" style="font-size: 10px;">
							<slot name="detail"></slot>
						</i>
						<div id="operation">
							<i class="web-font" style="font-size: 10px;">
								<slot name="operation"></slot>
							</i>
						</div>
					</div>
					<div id="content-images">
						<a-image-preview-group>
							<a-space :size="10" wrap>
								<div :class="{'bigImg':index == 0,'normalImg':index != 0}"
									v-for="(newProductItem,index) in formatnewProductsList" :key="index">
									<a-link :href="'/modelEvaluating/' + newProductItem.id" :hoverable="false"
										draggable="false">
										<a-image class="product-effect" draggable="false"
											:class="{'bigImg':index == 0,'normalImg':index != 0}"
											:src="newProductItem.src" :width="index == 0?'450':'210'"
											:height="index == 0?'230':'130'" :preview="false"
											:title="newProductItem.title">
											<template #extra>
												<!-- bigImg -->
												<div class="bigImg-time" v-if="index == 0">
													<a-tag class="tag-style">
														<template #icon>
															<icon-exclamation-circle-fill />
														</template>
														{{newProductItem.saleTime[0]}}
													</a-tag>
												</div>
												<div class="bigImg-price" v-if="index == 0">
													<div>
														<div v-if="newProductItem.price != ''">
															{{newProductItem.price}}元
														</div>
														<div v-else>未知</div>
													</div>
												</div>
												<div class="bigImg-type" v-if="index == 0">
													<a-tag class="tag-style" :class="{'blue':newProductItem.type == '拼装',
															'orange':newProductItem.type == '综合',
															'pink':newProductItem.type == '手办'
															}">
														{{newProductItem.type}}
													</a-tag>
												</div>
												<!-- normalImg -->
												<div class="normalImg-time" v-if="index != 0">
													<a-space>
														<a-tag class="tag-style">
															{{newProductItem.saleTime[0]}}
														</a-tag>
														<a-tag class="tag-style blue">
															{{newProductItem.brand}} >
														</a-tag>
													</a-space>
												</div>
												<div class="normalImg-price" v-if="index != 0">
													<div>
														<div v-if="newProductItem.price != ''">
															{{newProductItem.price}}
															<span>元</span>
														</div>
														<div v-else>未知</div>
													</div>
												</div>
												<div class="normalImg-type" v-if="index != 0">
													<a-tag class="tag-style" :class="{'blue':newProductItem.type == '拼装',
															'orange':newProductItem.type == '综合',
															'pink':newProductItem.type == '手办'
															}">
														{{newProductItem.type}}
													</a-tag>
												</div>
											</template>
										</a-image>
									</a-link>
								</div>
							</a-space>
						</a-image-preview-group>
					</div>
				</div>
			</a-space>
		</a-row>
	</a-layout-header>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		defineProps,
		onMounted
	} from 'vue';

	const props = defineProps({
		formatnewProductsList: Array
	});

	const emit = defineEmits();

	let {
		proxy
	} = getCurrentInstance();
</script>

<style lang="less" scoped>
	@import '@/assets/index/css/newProductList.less';
</style>
